.px2rem(@name, @px) {
  @{name}: @px / (@designWidth / 10) * 1rem
}

.w(@px) {
  .px2rem(width, @px);
}

.h(@px) {
  .px2rem(height, @px);
}

.lh(@px) {
  .px2rem(line-height, @px);
}

.bb20() {
  border-bottom: 20/75*1rem solid @bgColor;
}

.bri(@px) {
  .px2rem(border-radius, @px);
}

.p(@px) {
  .px2rem(padding, @px);
}

.padd(@tpx, @lpx) {
  .px2rem(padding-top, @tpx);
  .px2rem(padding-bottom, @tpx);
  .px2rem(padding-left, @lpx);
  .px2rem(padding-right, @lpx);
}

.pt(@px) {
  .px2rem(padding-top, @px);
}

.pl(@px) {
  .px2rem(padding-left, @px);
}

.pr(@px) {
  .px2rem(padding-right, @px);
}

.pb(@px) {
  .px2rem(padding-bottom, @px);
}

.m(@px) {
  .px2rem(margin, @px);
}

.mt(@px) {
  .px2rem(margin-top, @px);
}

.ml(@px) {
  .px2rem(margin-left, @px);
}

.mr(@px) {
  .px2rem(margin-right, @px);
}

.mb(@px) {
  .px2rem(margin-bottom, @px);
}

.loopf (@fs) when (@fs <=32) {
  .f@{fs} {
    .px2rem(font-size, @fs);
  }
  .loopf(@fs + 2);
}

.loopf(16);

.flex() {
  display: box;
  /* OLD - Android 4.4- */
  display: -webkit-box;
  /* OLD - iOS 6-, Safari 3.1-6 */
  display: -moz-box;
  /* OLD - Firefox 19- (buggy but mostly works) */
  display: -ms-flexbox;
  /* TWEENER - IE 10 */
  display: -webkit-flex;
  /* NEW - Chrome */
  display: flex;
  /* NEW, Spec - Opera 12.1, Firefox 20+ */
}

.prefix(@prop, @val) {
  -webkit-@{prop}: @val;
  -moz-@{prop}: @val;
  -ms-@{prop}: @val;
  -o-@{prop}: @val;
  @{prop}: @val;
}

.justify-content(@val) {
  & when (@val=flex-start) {
    -webkit-box-pack: start;
  }
  & when (@val=flex-end) {
    -webkit-box-pack: end;
  }
  & when (@val=center) {
    -webkit-box-pack: center;
  }
  & when (@val=space-between) {
    -webkit-box-pack: justify;
  }
  .prefix(justify-content, @val);
}

.align-items(@val) {
  & when (@val=flex-start) {
    -webkit-box-align: start;
  }
  & when (@val=flex-end) {
    -webkit-box-align: end;
  }
  & when (@val=center) {
    -webkit-box-align: center;
  }
  & when (@val=baseline) {
    -webkit-box-align: baseline;
  }
  & when (@val=stretch) {
    -webkit-box-align: stretch;
  }
  .prefix(align-items, @val);
}
.ellipsis{
  overflow: hidden;
  text-overflow:ellipsis;
  white-space: nowrap;
}
.ellipsis(@row:2){
  overflow:hidden;
  text-overflow:ellipsis;
  display:-webkit-box;
  -webkit-box-orient:vertical;
  -webkit-line-clamp:@row;
}
